<template>
	<view class="wrap">
		<form>
			<view class="form_item_h">
				<view class="h" style="width: 70%;">
					换房详情
				</view>
				<view style="width: 20%;text-align: end;color: #ff5a00;"
					:style="list.contractState==0?'color:#51aa37':list.contractState==1?'color:#51aa37':list.contractState==2?'color:#00c6ff':list.contractState==3?'color:#dae1de':list.contractState==4?'color:#ff6d00':''">
					{{list.contractState==0?'待支付':list.contractState==1?'执行中':list.contractState==2?'执行完毕':list.contractState==3?'解除':list.contractState==4?'退房中':''}}
				</view>
			</view>
			<!-- <view class="form_item">
				<view class="label">
					<text class="label_text">*</text><text>合同编号</text>
				</view>
				<view class="input">
					
				</view>
			</view> -->
			<!-- <view class="form_item">
				<view class="label">
					<text class="label_text"></text><text>门店名称</text>
				</view>
				<view class="input">
					{{list.deptName}}
				</view>
			</view>
			 -->
			<view class="form_item">
				<view class="label">
					<text class="label_text"></text><text>门店名称</text>
				</view>
				<view class="input">
					{{list.deptName}}
				</view>
			</view>
			<view class="form_item">
				<view class="label">
					<text class="label_text"></text><text>房源号</text>
				</view>
				<view class="input">
					{{list.roomNum}}
				</view>
			</view>
			<view class="form_item">
				<view class="label">
					<text class="label_text"></text><text>合同编号</text>
				</view>
				<view class="input">
					{{list.contractId}}
				</view>
			</view>
			<view class="form_item">
				<view class="label">
					<text class="label_text"></text><text>合同名称</text>
				</view>
				<view class="input">
					{{list.contractName}}
				</view>
			</view>
			<view class="form_item">
				<view class="label">
					<text class="label_text"></text><text>申请人</text>
				</view>
				<view class="input">
					{{list.cardName}}
				</view>
			</view>
			<view class="form_item">
				<view class="label">
					<text class="label_text"></text><text>申请日期</text>
				</view>
				<view class="input">
					{{list.refundTime}}
				</view>
			</view>
			<!-- <view class="form_item">
				<view class="label">
					<text class="label_text"></text><text>退押金</text>
				</view>
				<view class="input">
					{{list.refundDeposit}}
				</view>
			</view>
			<view class="form_item">
				<view class="label">
					<text class="label_text"></text><text>退租金</text>
				</view>
				<view class="input">
					{{list.refundRent}}
				</view>
			</view>
			<view class="from_file" style="border: none;">
				<view class="label">
					<text class="label_text">*</text><text>室内图片</text>
				</view>
			</view>
			<uni-file-picker class="file" v-model="roomUrlList" fileMediatype="image" limit="9" mode="grid"
				@select="roomSelect" @fail="roomFail" @delete="roomDel" :disabled="refundState" :del-icon="delIcon" />


			<view class="form_item">
				<view class="label">
					<text class="label_text">*</text><text>水表数值</text>
				</view>
				<view class="input">
					{{waterNum}}
				</view>
			</view>
			<view class="form_item">
				<view class="label">
					<text class="label_text">*</text><text>电表数值</text>
				</view>
				<view class="input">
					{{electricityNum}}
				</view>
			</view>
			<view class="form_item">
				<view class="label">
					<text class="label_text">*</text><text>燃气表数</text>
				</view>
				<view class="input">
					{{gasNum}}
				</view>
			</view>
			<view class="from_file" style="border: none;">
				<view class="label">
					<text class="label_text">*</text><text>水电燃气表图片</text>
				</view>
			</view>
			<uni-file-picker class="file" v-model="otherUrlList" fileMediatype="image" limit="9" mode="grid"
				@select="otherSelect" @fail="otherFail" @delete="otherDel" :disabled="refundState"
				:del-icon="delIcon" /> -->

			<!-- <view class="form_item">
				<view class="label">
					<text class="label_text">*</text><text>水费</text>
				</view>
				<view class="input">
					{{refundWater}}
				</view>
			</view>
			<view class="form_item">
				<view class="label">
					<text class="label_text">*</text><text>电费</text>
				</view>
				<view class="input">
					{{refundElectricity}}
				</view>
			</view>
			<view class="form_item">
				<view class="label">
					<text class="label_text">*</text><text>燃气费</text>
				</view>
				<view class="input">
					{{refundGas}}
				</view>
			</view> -->

			<!-- <view class="form_item">
				<view class="label">
					<text class="label_text">*</text><text>赔偿金额</text>
				</view>
				<input type="digit" placeholder-class="font_size" placeholder="请输入赔偿金额,无则输入0" v-model="damages">
			</view>
			<view class="from_file" style="border: none;">
				<view class="label">
					<text class="label_text"></text><text>物品损坏图片</text>
				</view>
			</view>
			<uni-file-picker class="file" v-model="damageUrlList" fileMediatype="image" limit="9" mode="grid"
				@select="damageSelect" @fail="damageFail" @delete="damageDel" :disabled="refundState"
				:del-icon="delIcon" />


			<view class="form_item">
				<view class="label">
					<text class="label_text"></text><text>物品损坏介绍</text>
				</view>
			</view>
			<textarea :disabled="refundState" type="text" placeholder-class="placeholder_textarea"
				placeholder="请输入物品损坏介绍" v-model="damage"></textarea>

			<view class="form_item">
				<view class="label">
					<text class="label_text">*</text><text>违约金</text>
				</view>
				<view class="input">
					{{defaultPrice}}
				</view>
			</view> -->
			<!-- 	<view class="form_item">
				<view class="label">
					<text class="label_text">*</text><text>逾期金额</text>
				</view>
				<view class="input">
					{{expirePrice}}
				</view>
			</view>
			<view class="form_item" v-if="refundPrice!=null">
				<view class="label">
					<text class="label_text">*</text><text>实际退费总金额</text>
				</view>
				<view class="input">
					{{refundPrice}}
				</view>
			</view>
			<view class="form_item">
				<view class="label">
					<text class="label_text">*</text><text>申请时间</text>
				</view>
				<view class="input">{{list.refundTime}}</view>
			</view> -->
			<!-- <view class="form_item">
				<view class="label">
					<text class="label_text"></text><text>退费详情</text>
				</view>
			</view>
			<textarea :disabled="refundState" type="text" placeholder-class="font_size" placeholder="请输入退费详情"
				v-model="refundDetails"></textarea> -->

			<!-- <view class="form_item">
				<view class="label">
					<text class="label_text"></text><text>驳回详情</text>
				</view>
			</view>
			<textarea :disabled="refundState" type="text" placeholder-class="font_size" placeholder="请输入驳回原因"
				v-model="reject"></textarea> -->

			<!-- 	<view class="form_item">
				<view class="label">
					<text class="label_text"></text><text>冲抵金额</text>
				</view>
				<view class="input">
					{{list.offsetPrice}}
				</view>
			</view> -->
			<view style="width: 100%;height: 20rpx;">
			</view>
		</form>
	</view>
</template>

<script module="utils" lang="wxs" src="../../utils/imgSrc.wxs"></script>

<script>
	import config from '../../config.js';

	import {
		throttle
	} from "@/utils/throttle.js"

	export default {
		data() {
			return {
				permission: uni.getStorageSync('permission'),
				list: [],
				datetimesingle: '',
				refundId: '',
				roomFile: [],
				roomUrlList: [],
				roomFileList: [],
				roomMessage: '',

				otherFile: [],
				otherUrlList: [],
				otherFileList: [],
				otherMessage: '',

				damageFile: [],
				damageUrlList: [],
				damageFileList: [],
				damageMessage: '',

				refundPrice: '',
				refundDeposit: 0,
				refundRent: '',
				refundWater: '',
				refundElectricity: '',
				waterNum: '',
				electricityNum: '',
				damages: '',
				defaultPrice: '',
				reject: '',
				damage: '',
				// dayNum: '',
				refundDetails: '',
				gasNum: '',
				refundGas: '',
				expirePrice: '',
				delIcon: false,
				refundState: true,
			};
		},
		onLoad(option) {
			this.contractId = option.contractId
			let data = {
				contractId: option.contractId
			}
			this.api.get('hetong/refund/app/selRefundAndContractAll', data).then(res => {
				if (res.data.code == 200) {
					this.list = res.data.data
					// this.gasNum = this.list.gasNum
					// this.reject = this.list.reject
					// this.refundDetails = this.list.refundDetails
					// this.refundPrice = this.list.refundPrice
					// this.expirePrice = this.list.expirePrice
					// this.damage = this.list.damage
					// this.damageSelect = this.list.damageSelect
					// this.refundGas = this.list.refundGas
					// this.refundElectricity = this.list.refundElectricity
					// this.waterNum = this.list.waterNum
					// this.damages = this.list.damages
					// this.electricityNum = this.list.electricityNum
					// this.refundWater = this.list.refundWater
					// this.defaultPrice = this.list.defaultPrice

					// if (res.data.data.expirePrice != null) {
					// 	this.expirePrice = res.data.data.expirePrice
					// } else {
					// 	this.expirePrice = 0
					// }
				}
			})

			// this.picList()
		},

		onShow() {

		},
		onReady() {

		},
		methods: {
			// picList() {
			// 	let data = {
			// 		refundId: this.refundId
			// 	}
			// 	let roomUrlList = []
			// 	let otherUrlList = []
			// 	let damageUrlList = []
			// 	this.api.get('hetong/refund/app/getRefundImg', data).then(res => {
			// 		if (res.data.code == 200) {
			// 			for (let i = 0; i < res.data.data.defaultImgs.imgUrls.length; i++) {
			// 				let url = {
			// 					url: res.data.data.defaultImgs.imgUrls[i]
			// 				}
			// 				this.roomFileList.push(res.data.data.dashboardImgs.imgUrls[i].ossId)
			// 				roomUrlList.push(url)
			// 			}

			// 			for (let l = 0; l < res.data.data.dashboardImgs.imgUrls.length; l++) {
			// 				let url = {
			// 					url: res.data.data.dashboardImgs.imgUrls[l]
			// 				}
			// 				this.otherFileList.push(res.data.data.dashboardImgs.imgUrls[l].ossId)
			// 				otherUrlList.push(url)
			// 			}

			// 			for (let z = 0; z < res.data.data.damageImgs.imgUrls.length; z++) {
			// 				let url = {
			// 					url: res.data.data.damageImgs.imgUrls[z]
			// 				}
			// 				this.damageFileList.push(res.data.data.dashboardImgs.imgUrls[z].ossId)
			// 				damageUrlList.push(url)
			// 			}

			// 			this.roomUrlList = roomUrlList
			// 			this.otherUrlList = otherUrlList
			// 			this.damageUrlList = damageUrlList
			// 		}
			// 	})
			// },
		},
	};
</script>

<style lang="scss">
	.flex_most {
		width: 28rpx;
		height: 28rpx;
		margin-top: 5rpx;
	}

	.flex_logo {
		width: 28rpx;
		height: 28rpx;
		margin-top: 46rpx;
	}

	.logo {
		width: 80rpx;
		height: 80rpx;
		margin-top: 20rpx;
		margin-left: 310rpx;
	}

	.wrap {
		margin: 0 auto 54rpx;
		width: 718rpx;
	}

	.flex {
		display: flex;
		justify-content: flex-end;
	}

	.form_item_h {
		width: 718rpx;
		height: 40rpx;
		border-bottom: 1rpx solid #aaacba;
		display: flex;
		flex-wrap: nowrap;
		overflow: hidden;
		padding: 40rpx 0;
	}

	#submit {
		width: 660rpx;
		height: 112rpx;
		line-height: 112rpx;
		background: #ff6900;
		border-radius: 8rpx;
		text-align: center;
		font-size: 34rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #FFFFFF;
		margin-top: 30rpx;
	}

	.gray_h {
		width: auto;
		height: 40rpx;
		font-size: 28rpx;
		font-weight: 400;
		color: #AAACAB;
		line-height: 40rpx;
		margin: 34rpx 0 44rpx 24rpx;
		box-sizing: border-box;
	}

	textarea {
		width: 564rpx;
		height: 190rpx;
		border: 2rpx solid #F7F4F4;
		margin: 0 auto;
		font-size: 28rpx;
		font-weight: 400;
		color: #AAACAB;
		padding: 24rpx 38rpx 14rpx 38rpx;
	}

	.placeholder_textarea {
		font-size: 28rpx;
		font-weight: 400;
		color: #AAACAB;

	}

	.h {
		height: 48rpx;
		font-size: 34rpx;
		font-weight: 400;
		color: #1A1A1A;
		line-height: 48rpx;
		margin-left: 44rpx;
	}

	form {
		width: 718rpx;

		.form_item_logo {
			width: 718rpx;
			height: 120rpx;
			border-bottom: 1rpx solid #F7F4F4;
			display: flex;
			justify-content: flex-start;
			flex-wrap: nowrap;
			overflow: hidden;

			.label {
				width: 40%;
				height: 120rpx;
				font-size: 28rpx;
				font-weight: 400;
				color: #AAACAB;
				line-height: 120rpx;

				.label_text {
					color: red;
					margin-left: 28rpx;
					margin-top: 16rpx;
					margin-right: 10rpx;
				}
			}

			.font_size {
				font-size: 28rpx;
				font-weight: 400;
				color: #AAACAB;
			}

			.input {
				width: 55%;
				height: 120rpx;
				font-size: 28rpx;
				font-weight: 400;
				color: black;
				line-height: 120rpx;
				text-align: end;
			}

		}

		.uni-file-picker__container {
			display: flex;
			box-sizing: border-box;
			flex-wrap: wrap;
			margin: -5px;
			width: 660rpx;
			margin: 0 auto;
		}

		.from_file {
			width: 718rpx;
			height: 40rpx;
			border-bottom: 1rpx solid #F7F4F4;
			display: flex;
			justify-content: flex-start;
			flex-wrap: nowrap;
			overflow: hidden;
			padding: 40rpx 0 20rpx;

			.label {
				width: 40%;
				height: 40rpx;
				font-size: 28rpx;
				font-weight: 400;
				color: #AAACAB;
				line-height: 40rpx;

				.label_text {
					color: red;
					margin-left: 28rpx;
					margin-top: 16rpx;
					margin-right: 10rpx;
				}
			}

			.input {
				width: 55%;
				height: 40rpx;
				font-size: 28rpx;
				font-weight: 400;
				color: black;
				line-height: 40rpx;
				text-align: end;
			}

			.font_size {
				font-size: 28rpx;
				font-weight: 400;
				color: #AAACAB;
			}

			input {
				width: 55%;
				height: 40rpx;
				font-size: 28rpx;
				font-weight: 400;
				color: black;
				line-height: 40rpx;
				text-align: end;
			}
		}


		.form_item {
			width: 718rpx;
			height: 40rpx;
			border-bottom: 1rpx solid #F7F4F4;
			display: flex;
			justify-content: flex-start;
			flex-wrap: nowrap;
			overflow: hidden;
			padding: 40rpx 0;


			.label {
				width: 40%;
				height: 40rpx;
				font-size: 28rpx;
				font-weight: 400;
				color: #AAACAB;
				line-height: 40rpx;

				.label_text {
					color: red;
					margin-left: 28rpx;
					margin-top: 16rpx;
					margin-right: 10rpx;
				}
			}

			.input {
				width: 55%;
				height: 40rpx;
				font-size: 28rpx;
				font-weight: 400;
				color: black;
				line-height: 40rpx;
				text-align: end;
			}

			.font_size {
				font-size: 28rpx;
				font-weight: 400;
				color: #AAACAB;
			}

			input {
				width: 55%;
				height: 40rpx;
				font-size: 28rpx;
				font-weight: 400;
				color: black;
				line-height: 40rpx;
				text-align: end;
			}
		}
	}
</style>